<template>
    <div class="taskList">
        <!-- 导航栏 -->
        <div class="header_body">
            <header-nav :leftArrow="true" :slefBack="true" titelText="选择任务" @goBack="goBack"></header-nav>
        </div>
        <div class="list">
            <van-search v-model="searchForm.keyword" placeholder="可输入单位名称搜索" @update:model-value="onSearch" />
            <div class="table">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="tableList.length > 0">
                    <van-list>
                        <van-radio-group v-model="taskId">
                            <template v-for="item in tableList" :key="item.id">
                                <div>
                                    <van-radio :name="item.id" style="padding-left:16px;box-sizing: border-box;">
                                        <div class="task-box">
                                            <div class="task-no">{{ item.taskNo }}</div>
                                            <div class="content">
                                                <div class="type">{{ ['自然人', '法人', '个体工商户', '非法人组织'][item.partyType] }}
                                                </div>
                                                <div class="name">{{ item.placeName }}</div>
                                            </div>
                                        </div>
                                    </van-radio>
                                    <div class="line"></div>
                                </div>
                            </template>

                        </van-radio-group>
                    </van-list>
                </van-pull-refresh>
                <div class="empty" v-else>
                    <img src="../../assets/images/empty2.png" alt="" />
                    <div>暂无数据</div>
                </div>
            </div>
        </div>
        <div class="submitBtn">
            <van-button plain block type="primary" class="btn-left" @click="goBack" style="margin-right: 8px">
                取消
            </van-button>
            <van-button block type="primary" class="btn-right" @click="submit">
                提交
            </van-button>
        </div>
    </div>
</template>
<script setup name="taskList">
const router = useRouter()
const route = useRoute()
const { usePunish } = $globalStore
//获取路径上的参数以便于回显
const id = route.query.id ? ref(route.query.id) : ref('')

console.log(route.query.id, 'route.query.id');
const params = ref(route.query.params || '')
const taskId = route.query.taskId ? ref(route.query.taskId) : ref('')
const taskIdSearch = route.query.taskIdSearch ? ref(route.query.taskIdSearch) : ref('')

const goBack = () => {
    router.push({ name: 'addRegisterTask', query: { id: id.value, params: params.value, taskId: taskId.value, taskIdSearch: taskIdSearch.value } })
    // router.push({ name: 'addPunish', query: { id: id.value, params: params.value, taskId: '' } })
}

const refreshing = ref(false)
const tableList = ref([])
const searchForm = ref({
    pn: 1,
    ps: 1000,
    keyword: '',
    taskId: route.query.taskIdSearch

})
const onRefresh = () => {
    getTaskList()
    setTimeout(() => {
        refreshing.value = false
    }, 500)
}
//模糊查询
const onSearch = () => {
    getTaskList()
}
const getTaskList = async () => {
    const res = await usePunish.getCaseTaskList(searchForm.value)
    tableList.value = res.data.records

}
const submit = () => {
    router.push({ name: 'addRegisterTask', query: { id: id.value, taskId: taskId.value, params: params.value, taskIdSearch: taskIdSearch.value } })
}
onMounted(() => {
    getTaskList()
})
</script>
<style lang="scss" scoped>
.taskList {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #f7f7f7;

    .list {
        width: 100%;
        height: 100%;
        margin-top: 46px;

        .table {
            background: #fff;
            width: 100%;
            height: calc(100% - 186px);
            overflow-y: auto;
            box-sizing: border-box;

            .task-box {
                padding: 16px 0;
                width: 19rem;
                margin-left: 10px;

                .task-no {
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 24px;
                    color: #2b2b2b;
                    margin-bottom: 10px;
                }

                .content {
                    display: flex;
                    justify-content: space-between;

                    /** 文本1 */
                    font-size: 15px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 22px;
                    color: rgba(77, 77, 77, 1);
                }
            }

            .line {
                width: 100%;
                height: 2px;
                background-color: #f7f7f7;
            }
        }
    }
}

.empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    >img {
        width: 128px;
        height: 96px;
    }

    >div {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(153, 153, 153, 1);
    }
}
</style>